import React, { forwardRef, useEffect, useState } from "react";
import { Form, Input, Select } from "antd";

const UserForm = forwardRef(
  ({ regionList, roleList, isUpdateDisabled, isUpdate }, ref) => {
    const [isDisabled, setIsDisabled] = useState(false);
    useEffect(() => {
      setIsDisabled(isUpdateDisabled);
    }, [isUpdateDisabled]);
    const {
      role: { roleType },
      region,
    } = JSON.parse(localStorage.getItem("token"));
    console.log(roleType, isUpdate, "{{{{");
    const checkRegionDisabled = (item, index) => {
      if (isUpdate) {
        if (roleType === 1) {
          return false;
        } else {
          return true;
        }
      } else {
        if (roleType === 1) {
          return false;
        } else {
          if (index === 1) {
            return item.value !== region;
          } else {
            return item.id !== 3;
          }
        }
      }
    };
    return (
      <Form ref={ref} layout="vertical" name="form_in_modal" preserve={false}>
        <Form.Item
          name="username"
          label="用戶名"
          rules={[
            {
              required: true,
              message: "Please input the title of collection!",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="password"
          label="密碼"
          rules={[
            {
              required: true,
              message: "Please input the title of collection!",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="region"
          label="區域"
          rules={
            isDisabled
              ? []
              : [
                  {
                    required: true,
                    message: "Please input the title of collection!",
                  },
                ]
          }
        >
          <Select
            disabled={isDisabled}
            options={regionList.map((item) => {
              return {
                label: item.title,
                value: item.value,
                disabled: checkRegionDisabled(item, 1),
              };
            })}
          />
        </Form.Item>
        <Form.Item
          name="roleId"
          label="角色"
          rules={[
            {
              required: true,
              message: "Please input the title of collection!",
            },
          ]}
        >
          <Select
            onChange={(value) => {
              console.log(value);
              if (value === 1) {
                setIsDisabled(true);
                ref.current.setFieldsValue({
                  region: "",
                });
              } else {
                setIsDisabled(false);
              }
            }}
            options={roleList.map((item) => {
              return {
                label: item.roleName,
                value: item.roleType,
                disabled: checkRegionDisabled(item, 2),
              };
            })}
          />
        </Form.Item>
      </Form>
    );
  },
);

export default UserForm;
